<script setup>
import { ref } from 'vue';
import {ElInput, ElButton, ElCheckbox, ElForm, ElFormItem, ElMessage, ElLoading} from 'element-plus';
import axios from "axios";
import {router} from "../../router/index.js";
import { userStore } from '../../stores/index.js'

const form = ref({});
const userItemStore = userStore()
const loading = ref(false);



const handleLogin = () => {
  loading.value = true; // 立即显示加载状态

  axios.post('/carcenter-service-personnel/staff/login', form.value)
    .then((res) => {
      if (res.data.code == 200) {
        const user = res.data.data;
        const token = user.token;

        userItemStore.loginSuccess(user);

        localStorage.setItem('token', token);
        localStorage.setItem('user', JSON.stringify(user));

        ElMessage.success(`登录成功 欢迎你：${user.staffName}`);
        router.push('/framework');
      }else {
        ElMessage.error(res.data.message);
      }

    })
    .catch(err => {
      console.error('登录失败:', err);

      // 区分网络错误和业务错误
      const errorMessage = err.response?.data?.message ||
          err.message ||
          '登录请求失败，请检查网络连接';
      ElMessage.error(errorMessage);
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>

<template>
  <div class="login-container">
    <div class="left-side">
      <img src="../../assets/login.png" alt="Login Image" />
    </div>
    <div class="right-side">
      <div class="welcome-message">
        <h2>欢迎登录</h2>
      </div>
      <ElForm :model="form">
        <ElFormItem>
          <ElInput v-model="form.phone" placeholder="请输入手机号码"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput type="password" v-model="form.loginPassword" placeholder="请输入密码"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" @click="handleLogin" v-loading="loading">登录</ElButton>
        </ElFormItem>
        <div class="auth-actions">
          <router-link to="/front/register" class="content-area">注册</router-link>
          <p>忘记密码请联系管理员</p>
        </div>

      </ElForm>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  height: 75vh;
  margin: 90px; /* 设置固定外边距，这里上下左右边距均为 20px */
  border-radius: 10px; /* 添加圆角，半径为 10px */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 无线轻微发光边框效果 */
}



.left-side {
  width: 70%; /* 左侧图片区域占一半宽度 */
  display: flex;
  background-color: RGB(5,37,112);
  justify-content: center;
  align-items: center;
}

.left-side img {
  max-width: 100%;
  max-height: 100%;

}

.right-side {
  width: 55%; /* 右侧登录表单区域占一半宽度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.welcome-message img {
  margin-bottom: 20px;
}

.welcome-message h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.el-input,
.el-checkbox {
  width: 300px;
  margin-bottom: 15px;
}

.el-button {
  width: 300px;
}

p {
  margin-top: 10px;
  font-size: 12px;
}

* {
  text-decoration: none !important; /* 强制去除下划线 */
}

.auth-actions {
  display: flex; /* 启用弹性布局 */
  justify-content: space-between; /* 两端对齐，实现左右分离 */
  align-items: center; /* 垂直方向居中对齐（可选，根据需求调整） */
  /* 可根据需要添加宽度，例如 width: 100%; 使其占满父容器宽度 */
  width: 100%;
}

.content-area {
  color: #4a90e2 !important;
  /* 可移除默认下划线（可选） */
  text-decoration: none;
}
</style>